<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html; charset=UTF-8" language="java"
	import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/page/base.jsp"%>
<%@ taglib prefix="d" uri="/doone-comm-ui-tags"%>
<html>
	<head>
		<title>分类信息管理</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<link type="text/css" href="<%=path%>/manage/css/layout.css" rel="stylesheet" />
		<link type="text/css" href="<%=path%>/manage/css/new_style.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/Tooltip.css" />

		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery-1.4.4.min.js"></script>

		<script type="text/javascript"
			src="<%=path%>/manage/js/easyTooltip.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery-ui-1.8.11.custom.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery.wysiwyg.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/hoverIntent.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/superfish.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/custom.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/My97DatePicker/WdatePicker.js"></script>
		<%-- 验证js Start --%>
		<script type="text/javascript" src="<%=path%>/manage/js/Tooltip.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery.validate.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery.validate.methods.min.js"></script>
		<script type="text/javascript"
			src="<%=path%>/manage/js/jquery.validate.defaults.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/errorTip.js"></script>
	</head>

	<script type="text/javascript">
	function openCatlog(intCateId) {
		//应用编辑

		$.ajax({
			url : root + '/dataBinding/getCatelog.action',
			method : 'post',
			dataType : 'json',
			data : {
				'intCateId' : intCateId
			},
			success : function(data) {
				//给form的文本赋值
				$("#intCateId").attr("value", data.intCateId);
				$("#varCateName").attr("value", data.varCateName);
				$("#imgFile").attr("src", data.varCateImgUrl);
				$("#intParentCateId").attr("value", data.intParentCateId);
				$("#imgWidth").attr("value", data.imgWidth);
				$("#imgHeight").attr("value", data.imgHeight);
				$("#imgSize").attr("value", data.imgSize);
				$("#picimgWidth").html(data.imgWidth);
				$("#picimgHeight").html(data.imgHeight);
				//打开dialog
				$("#openCatelogDialog").dialog("open");
			},
			error : function(err) {
				if (err.responseText != '')
					alert(err.responseText);
				else
					alert("请求失败！");
			}
		});

	}
	
	//检测文件格式
	var flag = true;
	function validateFile(obj) {       
		
		    var filepath = obj.value;
		
			var fileArr = filepath.split("\\");
			var fileTArr = fileArr[fileArr.length - 1].toLowerCase().split(".");
			var filetype = fileTArr[fileTArr.length - 1];
			if (filetype != "jpg" && filetype != "png") {
				$(obj).addErrorMessage("必须上传jpg、png格式的文件");					
				flag = false;
			} else {
				 $(obj).removeErrorMessage();	
				 flag = true;
			}
	}
	$(document).ready(function() {

		//加载dialog
		$("#openCatelogDialog").dialog({
			autoOpen : false,
			width : 650,
			height : 250,
			modal : true,
			title : '分类编辑',
			buttons : {
				"保存" : function() {
				if (!editCatelogForm.valid()) {					
						alert("数据验证为通过，无法保存");
					} else  if(!flag){
					    alert("上传文件格式错误");
					}else{
					$("#editCatelogForm").submit();
					$(this).dialog("close");
					}
				},
				"取消" : function() {
					$(this).dialog("close");
					$("#editCatelogForm")[0].reset();
				}
			},
			close : function() {
				$("#editCatelogForm")[0].reset();
			}
		});
		//

		var editCatelogForm = $("#editCatelogForm").validate({
			rules : {
				"catelogTab.varCateName" : {
					required : true
				}
			},
			messages : {
				"catelogTab.varCateName" : {
					required : "请输入分类名称"
				}
			}
		});

	});
</script>
	<body>
		<div>
			<div>
				<p class="sitemap">
					当前位置:分类信息管理
				</p>
				<h1>
					分类信息管理
				</h1>
				<div>
					<!-- Tabs -->
					<div id="tabs">
						<ul>
							<li>
								<a href="#tabs-1">分类信息列表</a>
							</li>

						</ul>

						<table class="fullwidth" cellpadding="0" cellspacing="0"
							border="0">
							<thead>
							<tr>
								<td>
									id
								</td>
								<td width="150">
									缩略图
								</td>
								<td>
									名称
								</td>
								<td>
									操作
								</td>
							</tr>
                            </thead>
                            <tbody>
							<s:iterator value="catelogList">
								<tr class="odd">
									<td>
										<s:property value="intCateId" />
									</td>
									<td>
										<img src="<s:property value="varCateImgUrl"/>" width="76"
											height="53">
									</td>
									<td>
										<s:property value="varCateName" />
									</td>
									<td>
										<a class="icon icon_edit" title="编辑 " href="javascript:openCatlog('<s:property value="intCateId" />')"></a>
									</td>

								</tr>
							</s:iterator>
							</tbody>
						</table>
					</div>
					<!-- 分页标签开始 -->
					<div align="right" style="float: right;">
						<d:page id="page" template="details" skin="gray">
						</d:page>
					</div>
					<!-- 分页标签结束 -->

				</div>

				<!-- 编辑页使用的弹出层 -->
				<div id="openCatelogDialog" style="display: none;">
					<form action="<%=path%>/dataBinding/editCatelogInfo.action"
						method="post" id="editCatelogForm" enctype=multipart/form-data>
						<s:hidden name="catelogTab.intParentCateId" id="intParentCateId"></s:hidden>
						<s:hidden name="imgWidth"></s:hidden>
						<s:hidden name="imgHeight"></s:hidden>
						<s:hidden name="imgSize"></s:hidden>
						<table class="fullwidth" cellpadding="0" cellspacing="0"
							border="0">
							<tr>
								<td>
									id
								</td>
								<td>
									<s:textfield name="catelogTab.intCateId" id="intCateId" readonly="true"></s:textfield>
									<span style="color: red">*</span>
								</td>
							</tr>
							<tr>
								<td>
									名称
								</td>
								<td>
									<s:textfield name="catelogTab.varCateName" id="varCateName"></s:textfield>
									<span style="color: red">*</span>
								</td>
							</tr>
							<tr>
								<td>
									缩略图
								</td>
								<td>
									<img src="" id="imgFile" width="54" height="32">
									<s:file name="myFile" onblur="validateFile(this)"></s:file>
									<%-- 
									（<span id="picimgWidth"></span>*<span id="picimgHeight"></span>，超过将等比缩放）
									--%>
									<span style="color: red">*</span>
								</td>
							</tr>
						</table>

					</form>
				</div>
	</body>
</html>
